<template>
	<view class="container">

		<!-- list -->
		<view class="list-box" v-if="incomeList.length>0">

			<view v-for="(m,n) in incomeList" :key="n" @click="toDetail(m.id)"
				class="flex-colum-start"
				style="background-color: #F9FAFB;width: 100%;padding: 12rpx;box-sizing: border-box;margin-bottom: 20rpx;">
				<view
					class="flex-row-between" style="width: 100%;margin-bottom: 20rpx;">
					<text style="font-size: 28rpx;color: #111827;">订单编号:</text>
					<text style="color: #6B7280;font-size: 28rpx;">{{m.order_no}}</text>
				</view>

				<view class="flex-colum-start"
					style="font-size: 24rpx;">
					<text>金额:¥{{m.total_amount}}</text>
					<text>备注:{{m.remark}}</text>
					<text>创建时间:{{m.created_at}}</text>
				</view>

			</view>

			<view class="loading-text">-没有更多了-</view>
		</view>

		<view v-else class="flex-colum-center" style="height: 60vh;">
			<image src="../../static/img/product/noData.png" style="width: 150rpx;height: 150rpx;"></image>
			<text style="color: gray;">无数据.....</text>
		</view>
		
		
		<view class="" style="width: 95vw;border-radius: 4rpx;box-sizing: border-box;background-color: #FF4D4F;position: fixed;bottom: 40rpx;">
			<view class="">
			<button  class="" style="background-color: #FF4D4F;" @click="toDecoration">
				<text style="border: 4rpx;font-family: Roboto;color: #FFFFFF;"> 提交报单</text>
			</button>
			</view>
		</view>	

	</view>
</template>

<script>
	import dateRangePicker from '@/components/date-range-picker/date-range-picker.vue'

	import {
		time7
	} from "@/js_sdk/fl-SOtime/SOtime.js"

	export default {
		components: {
			dateRangePicker
		},
		data() {
			return {
				statgeId:"",
				product_id:"",
				incomeList: [
					// {
					// time: "2025-08-01 12:00:00",
					// money: "123.00"
					// }
				],

				page: 1,
				size: 10,
			};
		},
		
		filters: {
			getStatus: function(s) {

			},

		},
		computed: {
		
		},
		onLoad(e) {
			this.statgeId = e.statgeId;
			this.product_id  = e.product_id;
		},
		onShow() {
			this.getMyIncome()	
		},
		
		onReachBottom() {
			this.getMyIncome()
		},
		
		methods: {
			init() {
				this.page = 1;
				this.size = 10;
				this.incomeList = [];
			},
			confirm(e) {

				console.log(e);
				this.selectDate = e;
				this.getMyIncome()

			},
	
			getMyIncome() {
				let that = this;
				var param = {
					page: this.page,
					size: this.size,
					product_id:this.product_id
				}
				this.$pin.request('GET', '/commission', param,
					successData => {
						if(successData.code == this.$pin.code.success&&successData.data){
							
							var records = successData.data.records;
							if(records.length>0){
								that.incomeList = that.incomeList.concat(records);
								this.page++;
							}else{
								uni.showToast({
									title: '没有更多数据',
									icon: 'none'
								})
							}
							
						}

					},
					failData => {
						console.log(failData)
						uni.showToast({
							icon: 'none',
							title: '加载信息时出错'
						})
					}
				)
			},
			toDecoration(e) {
				uni.navigateTo({
					url: '/pages/submit-form/submit-form?statgeId='+this.statgeId+'&product_id='+this.product_id
				})
			},
			toDetail(id){
				uni.navigateTo({
					url: '/pages/submit-form/submit-form?statgeId='+this.statgeId+'&product_id='+this.product_id+'&id='+id
				})
			}

		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 20rpx 3vw 20rpx;
		box-sizing: border-box;
		background-color: rgb(255, 255, 255);

		.selected {
			background-color: red;
			color: white;
		}


		.itemDetail {
			width: 100%;
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #C8C7CC;

			text {
				margin-right: 20px;
			}
		}

		.list-box {
			width: 100%;
			margin-bottom: 100rpx;

			.list-item {
				display: flex;
				height: 120rpx;
				justify-content: space-between;
				align-items: center;

				.item-left {
					display: flex;
					height: 90rpx;
					width: 20%;


				}

				.item-right {
					width: 100rpx;
					height: 50rpx;
					background-color: #7BBF6D;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 50rpx;
					border-radius: 10rpx;

				}

			}

		}
	}
</style>